import React, { useEffect, useState } from 'react';
import moment from 'moment';
import { message, Divider, Input, Button, Checkbox } from 'antd';
import styles from './ApproveDetail.less';
import {
  getTemplateDetail,
  approveTemplate
} from '../../../../messageManager/services/messageTemplateApi';
import { getQueryVariable } from '../../../../../utils/utils';

function ApproveDetail(props) {
  const {
    // location: { search },
    history
  } = props;
  // const searchParams = new URLSearchParams(search.substring(1));
  // const templateId = searchParams.get('templateId');
  // const pendingEventId = searchParams.get('pendingEventId');
  // const specificEventId = searchParams.get('specificEventId');
  const templateId = getQueryVariable("templateId");
  const pendingEventId = getQueryVariable("pendingEventId");
  const specificEventId = getQueryVariable("specificEventId");
  const [listData, setListData] = useState({});
  const [status, setStatus] = useState([]);
  const [describe, setDescribe] = useState('');
  const disabled = listData.auditStatus !== 0;

  useEffect(() => {
    if (templateId) {
      getTemplateDetail({ templateId }).then(res => {
        if (res.success) {
          setListData(res.datas);
          setStatus(res.datas.auditStatus === 0 ? [] : [res.datas.auditStatus]);
          setDescribe(res.datas.auditDescribe);
        } else {
          message.error(res.errMsg);
        }
      });
    }
  }, []);

  const listInfo = [
    {
      title: '模板名称',
      dataIndex: 'name'
    },
    {
      title: '模板类型',
      dataIndex: 'type',
      render: text => <span>{text === 1 ? 'APP模板' : '短信模板'}</span>
    },
    {
      title: '使用场景',
      dataIndex: 'description'
    },
    // {
    //   title: '模板标题',
    //   dataIndex: 'title',
    // },
    {
      title: '管理员',
      dataIndex: 'owner'
    },
    // {
    //   title: '归属部门',
    //   dataIndex: 'ownerDeptName',
    // },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      render: text => <span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>
    }
  ];

  const handleStatusChange = values => {
    setStatus([values[values.length - 1]]);
  };
  const handleDescribeChange = e => {
    setDescribe(e.target.value);
  };
  const handleSubmit = () => {
    if (!status.length) {
      message.error('请选择审批结果');
      return;
    }
    if (status[0] === -1 && !describe) {
      message.error('请输入审批意见');
      return;
    }
    const params = {
      eventType: 3,
      pendingEventId,
      stateHandle: status[0],
      handleDescribe: describe,
      specificEventId
    };
    approveTemplate(params).then(res => {
      if (res.success) {
        message.success('审批成功');
        history.go(-1);
      } else {
        message.error(res.errMsg);
      }
    });
  };

  return (
    <div className={styles.root}>
      <div className={styles.info}>
        <span className={styles.title}>基础信息</span>
        <ul>
          {listInfo.map(item => {
            let res = listData[item.dataIndex];
            if (item.render) {
              res = item.render(res);
            }
            return (
              <li key={item.dataIndex}>
                <div style={{ width: 90 }}>{item.title}</div>
                <div style={{ width: 'calc(100% - 90px)' }}>{res || '-'}</div>
              </li>
            );
          })}
        </ul>
      </div>

      <Divider />

      <div>
        <span className={styles.title}>基础信息</span>
        <div style={{ marginBottom: 16 }}>
          <span style={{ marginRight: 28 }}>审批结果</span>
          <Checkbox.Group
            value={status}
            disabled={disabled}
            onChange={handleStatusChange}
          >
            <Checkbox value={1}>通过</Checkbox>
            <Checkbox value={-1}>不通过</Checkbox>
          </Checkbox.Group>
        </div>

        {status[0] === -1 && (
          <React.Fragment>
            <div>审批意见</div>
            <Input.TextArea
              autoSize={{ minRows: 4 }}
              style={{ width: '80%', margin: '5px 0 16px 0' }}
              onChange={handleDescribeChange}
              value={describe}
              disabled={disabled}
            />
          </React.Fragment>
        )}
      </div>
      {disabled || (
        <div className={styles.footer}>
          <Button type='primary' onClick={handleSubmit}>
            确定
          </Button>
          <Button style={{ marginLeft: 8 }} onClick={() => history.go(-1)}>
            取消
          </Button>
        </div>
      )}
    </div>
  );
}

export default ApproveDetail;
